<template>
  <div class="uploadMore">
    <el-upload
      class="upload-demo"
      action="/api/utils/upload"
      list-type="picture-card"
      :on-success="handleSuccess"
      :show-file-list="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <img
      v-for="(item, index) in files"
      :src="item"
      :key="item"
      @click="remove(index)"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      files: []
    };
  },
  props: ["fileList"],
  watch: {
    fileList(val) {
      this.files = val.split(",");
    }
  },
  methods: {
    remove(index) {
      this.files.splice(index, 1);
    },
    handleSuccess(res) {
      this.files.push(res.data.url);
    },
    getFiles() {
      return this.files;
    }
  }
};
</script>
<style lang="scss">
.uploadMore {
  .upload-demo {
    .el-upload {
      width: auto !important;
      height: auto !important;
      line-height: inherit !important;
    }
  }
  img {
    height: 40px;
    width: 40px;
  }
}
</style>
